<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-09 14:10:07
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-21 11:06:03
 * @Description: 登录页
-->
<template>
  <div class="bg">
    <div class="shadow"></div>
    <el-card class="form-card" shadow="hover">
      <template #header>
        <div class="card-header">
          登录
          <img style="width: 50px" src="@/assets/img/logo.png" />
        </div>
      </template>

      <el-form
        ref="loginFormRef"
        :model="form"
        label-position="top"
        label-width="41px"
        :rules="rules"
        status-icon
      >
        <el-form-item label="账号:" prop="username">
          <el-input v-model="form.username">
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input type="password" show-password v-model="form.password">
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item>
          <el-button
            v-if="!loading"
            type="primary"
            round
            @click="submitForm(loginFormRef)"
            >登录</el-button
          >
          <el-button v-else round type="primary" loading>Loading</el-button>
        </el-form-item>
      </el-form>
      <el-row justify="space-between">
        <el-col :span="6" style="text-align: center">
          <el-link type="info" href="/#/register">注册账号</el-link>
        </el-col>
        <el-col :span="6" style="text-align: center">
          <el-link type="info" href="">忘记密码？</el-link>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
 
<script setup>
import { ref, reactive } from "vue";
import { useElMessage } from "@/assets/js";
import { useRoute,useRouter } from "vue-router";
import { admin } from "@/api";

let route = useRoute();
let router = useRouter();

const loading = ref(false);

const loginFormRef = ref(null);

/**
 * @description: 表单项
 * @return {*}
 */
const form = reactive({
  username: "",
  password: "",
});

/**
 * @description: 表单验证规则
 * @return {*}
 */
const rules = reactive({
  username: [{ required: true, message: "请填写账号", trigger: "blur" }],
  password: [
    { required: true, message: "请填写密码", trigger: "blur" },
    { pattern: /\d{3,}/, message: "密码长度至少三位数字", trigger: "blur" },
  ],
});

/**
 * @description: 表单提交
 * @return {*}
 */
const submitForm = (formEL) => {
  formEL.validate(async (valid, fields) => {
    if (valid) {
      // 通过校验
      let { status, msg, data } = await admin.login({ ...form });
      // 登陆成功
      if (status) {
        sessionStorage.setItem("token", data.token);
        sessionStorage.setItem("id", data.id);
        sessionStorage.setItem("role", data.role);
        router.replace("/admin/home");
        return
      }
      // 登陆失败
      if(!status){
        useElMessage('error',msg)
        return
      }
    } else {
      useElMessage("warning", "请填写完整表单" + fields);
      return;
    }
  });
};
</script>

<style lang='less' scoped>
.bg {
  position: relative;
  min-height: 100vh;
  background-image: url("@/assets/img/login/bg.jpg");
  background-position: top center;
  background-size: cover;
  animation: chengeBg 30s infinite;
  .shadow {
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  .form-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 360px;
    transform: translateX(-50%) translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    border-radius: 10px;
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .el-button {
      width: 100%;
    }
  }
}
</style>

